<template>
  <div style="height: 100%">
    <el-card class="" style="margin-bottom: 20px">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="选择部门：">
              <el-select
                style="width: 70%"
                v-model="search.states"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="执行中" value="2"> </el-option>
                <el-option label="已停用" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号状态：">
              <el-select
                style="width: 70%"
                v-model="search.channel"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="正常" value="2"> </el-option>
                <el-option label="禁用" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位状态：">
              <el-select
                style="width: 70%"
                v-model="search.job"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="在职" value="2"> </el-option>
                <el-option label="离职" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="time_box">
              <el-select
                popper-class="select_class"
                clearable
                v-model="timeState"
                placeholder="请选择"
              >
                <el-option label="入职时间" value="1"> </el-option>
                <el-option label="离职时间" value="2"> </el-option>
              </el-select>
              <el-date-picker
                @change="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                align="left"
                v-model="timeValue"
              >
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row style="height: 100%" :gutter="20">
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="search.employees"
              class="input-with-select"
            >
              <el-select
                style="width: 100px"
                v-model="search.employees_type"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option label="员工姓名" value="1"></el-option>
                <el-option label="手机号" value="2"></el-option>
              </el-select>
            </el-input>
          </el-col>
          <el-col :span="6">
            <div>
              <el-button class="button" @click="add_cb('1')">查询</el-button>
              <el-button class="button" @click="clearFn">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="add_cb" class="add_cb">新增</el-button>
        <el-button @click="exe" class="add_cb">导出</el-button>
      </div>
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; height: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="员工姓名" width="">
        </el-table-column>
        <el-table-column prop="type" label="员工账号" width="">
        </el-table-column>
        <el-table-column prop="rate" label="组织架构" width="">
        </el-table-column>
        <el-table-column prop="type" label="账号状态" width="">
          <template slot-scope="scope">
            <span :class="scope.row.type == 1 ? '' : 'type_red'">
              {{ scope.row.type == 1 ? "正常" : "禁用" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="职位状态" width="">
          <template slot-scope="scope">
            <span :class="scope.row.type == 1 ? '' : 'type_red'">
              {{ scope.row.type == 1 ? "在职" : "离职" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="入职时间" width="">
          <template slot-scope="scope">
            <span :class="scope.row.type == 1 ? '' : 'type_red'">
              {{ scope.row.time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="离职时间" width="">
          <template slot-scope="scope">
            <span :class="scope.row.type == 1 ? '' : 'type_red'">
              {{ scope.row.over_time ? scope.row.over_time : "--" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" @click="add_cb('1')" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-card>
    <!-- 添加成本方案 -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 渠道选择
      form: {
        select: ""
      },
      search: {},
      timeValue: "",
      timeState: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          time: "2023-10-28-9-00-00",
          type: "2",
          rate: "0.22-0.6",
          over_time: "2023-10-28-9-00-00"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          time: "2023-10-28-9-00-00",
          type: "1",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          time: "2023-10-28-9-00-00",
          type: "2",
          rate: "0.22-0.6",
          over_time: "2023-10-28-9-00-00"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          time: "2023-10-28-9-00-00",
          type: "1",
          rate: "0.22-0.6"
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    // 分页
    handleSizeChange () {},
    handleCurrentChange () {},
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 添加/编辑
    add_cb (val) {
      if (val == 1) {
        localStorage.setItem("ps_key", 1)
        this.$router.push({
          name: "PsAdd",
          params: {
            type: "1",
            parameter: "编辑员工"
          }
        })
      } else {
        localStorage.setItem("ps_key", 3)
        this.$router.push({
          name: "PsAdd"
        })
      }
    },
    // 详情
    handleClick () {
      localStorage.setItem("ps_key", 2)
      this.$router.push({
        name: "PsAdd",
        params: {
          type: "2",
          parameter: "员工详情"
        }
      })
    },
    // 导出表格
    exe () {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择要导出的数据")
        return
      }
      console.log("导出信息", this.multipleSelection)
    },
    // 查看
    see () {
      console.log("查询参数", this.search)
    },
    // 重置
    clearFn () {
      this.timeValue = ""
      this.search = {}
    },
    // 选择按什么时间搜索
    time () {
      if (this.timeState == 1) {
        delete this.search.add_time
        this.search.over_time = this.timeValue
      } else if (this.timeState == 2) {
        delete this.search.over_time
        this.search.add_time = this.timeValue
      }
    }
  }
}
</script>
<style scoped>
.pagination {
  text-align: right;
  margin-top: 20px;
}
.box-card {
  height: 100%;
}
.type_red {
  color: red;
}
/deep/ .el-table__cell {
  text-align: center;
}
.centered-table th,
.centered-table td {
  text-align: center;
}

.add_cb {
  width: 110px;
  height: 32px;
  /* background: #3f75ff; */
  color: #3f75ff;
  border: 1px solid #3f75ff;
  border-radius: 4px 4px 4px 4px;
}
.button {
  width: 106px;
  height: 31px;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
  color: #fff;
}
.time_box {
  display: flex;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
